<template>
	<w-layout showNavbar navTitle="许愿合成" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #navRight>
			<view @click="popup.showRule = true" class="">
				说明
			</view>
		</template>
		<template #default>
			<view class="container">
				<view class="fc-ac mt-60" style="position: relative;">
					<image style="width: 480rpx;height: 480rpx;position: absolute;left: 50%;top: 10%;transform: translateX(-50%);" src="/static/icon/public/base-4.png" mode=""></image>
					<swiper 
						:indicator-dots="false" 
						:autoplay="false" 
						:current="swiper.current" 
						@change="swiperChange" 
						circular 
						style="width: 100%;height: 280rpx;"
					>
						<swiper-item class="swiper-item fc-ac-jc" v-for="(item,index) in swiper.list" :key="item.id">
							<view class="px-10 py-10">
								<cut-corner :arrow="2" clipSize="26rpx">
									<view
										:class="[swiper.current == index?'swiper-item-active':'swiper-item-default']"
									>
										<image class="transition" :src="item.imgurl" mode="widthFix"></image>
									</view>
								</cut-corner>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<up-gap height="110"></up-gap>
				
				
				<view style="min-height: 320rpx;position: relative;" class="public-card-10 fc px-40 py-50 mt-40">
					<view class="pb-60 fr-ac-jsb u-border-bottom" style="border-color: var(--gray-line) !important;">
						<view class="ellipsis-1 flex-1 mr-40">
							{{swiper.list[swiper.current].title}}
						</view>
						<view @click="$u.route('/pages/conflate/history')" class="fr-ac ">
							<view class="op-50 mr-5">
								合成记录
							</view>
							<image style="width: 24rpx;height: 24rpx;" src="/static/icon/public/right.png" mode=""></image>
						</view>
					</view>
					<view class="mt-50 pb-50 u-border-bottom" style="border-color: var(--gray-line) !important;">
						<scroll-view class="" scroll-x="true" >
							<view class="fr-ac">
								<view @click="scrollChange(item,index)" :class="index == swiper.current?'public-img-4':''" class="mr-30 px-10 py-10" v-for="(item,index) in swiper.list" :key="index">
									<cut-corner :arrow="2" clipSize="22rpx">
										<image style="width: 160rpx;height: 160rpx;" :src="item.imgurl" mode="widthFix"></image>
									</cut-corner>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="mt-50">
						<view class="fr-ac-jsb">
							<view class="">
								合成进度
							</view>
							<view class="color">
								¥{{swiper.list[swiper.current].price}}
							</view>
						</view>
						<view class="w-100 mt-30" style="position: relative;">
							<cut-corner :arrow="3" clipSize="12rpx" width="100%" height="100%">
							<cut-corner :arrow="1" clipSize="12rpx" width="100%" height="100%">
							<view class="px-2 py-2 w-100 h-100" style="background-color: #66E9FF;height: 40rpx;">
								<cut-corner :arrow="3" clipSize="12rpx" width="100%" height="100%">
								<cut-corner :arrow="1" clipSize="12rpx" width="100%" height="100%">
								<view class="px-6 py-6 w-100 h-100" style="background-color: #1C4C5A;">
									<cut-corner :arrow="3" clipSize="8rpx" width="100%" height="100%">
									<cut-corner :arrow="1" clipSize="8rpx" width="100%" height="100%">
									<view class="w-60 h-100 transition" :style="{'width':processWidth > 100? '100%' : processWidth + '%'}" style="background-color: #66E9FF;">
										
									</view>
									</cut-corner>
									</cut-corner>
								</view>
								</cut-corner>
								</cut-corner>
							</view>
							</cut-corner>
							</cut-corner>
							
							<view class="fs-24" style="position: absolute;right: 20rpx;top: 50%;transform: translateY(-50%);">
								¥{{selectAllCardPrice}}
							</view>
						</view>
					</view>
				</view>
				
				<view class="fr-ac mt-40">
					<view class="">
						<up-tabs
							@change="tabChange"
							:list="tabs.list" 
							:current="tabs.current"
							lineWidth="14"
							lineHeight="14"
							:lineColor="`url('/static/icon/public/top-fill.png') 100% 100%`"
							:activeStyle="{
								color: publicStyles['--color'],
								fontWeight: 'bold',
								transform: 'scale(1.2)'
							}"
							itemStyle="height: 60px;width:100rpx;"
							:inactiveStyle="{
								'font-size': '32rpx',
							}"
						>
						</up-tabs>
					</view>
					<view @click="type_tabs.show = !type_tabs.show" class="public-btn-13 fr-ac px-30 py-14 transition ml-auto" style="position: relative;">
						<view class="mr-20">
							{{type_tabs.list[type_tabs.current].name}}
						</view>
						<image v-if="!type_tabs.show" style="width: 24rpx;height: 24rpx;" src="/static/icon/public/bottom-fill.png" mode=""></image>
						<image v-else style="width: 24rpx;height: 24rpx;" src="/static/icon/public/top-fill.png" mode=""></image>
						
						<view @click.stop v-if="type_tabs.show" class="public-box-10 py-20 w-fit h-fit animate__animated animate__fadeIn" style="position: absolute;right: 0;top: 80rpx;z-index: 88;">
							<view class="px-30" style="width: 260rpx;max-height: 480rpx;overflow-y: scroll;">
								<view @click="typeChange(item,index)" :class="type_tabs.current == index?'color':''" class="py-30 u-border-bottom t-c" style="border-color: var(--gray-line) !important;" v-for="(item,index) in type_tabs.list" :key="index">
									{{item.name}}
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="gap-40 mt-40 " style="display: grid;grid-template-columns: repeat(2,1fr);">
					<view class="public-card-8 fc px-30 py-30 fc-ac" style="min-height: 388rpx;position: relative;" v-for="(item,index) in state.list" :key="index">
						<image style="width: 100%;height: 250rpx;" :src="item.goodslist_imgurl" mode=""></image>
						<view class="fs-24 op-90 ellipsis-1 mt-40">
							{{item.goodslist_title}}
						</view>
						<view class="fr-ac-jsb mt-20 w-100">
							<view class="op-50 fs-24">
								{{item.count}}/{{item.prize_num}}
							</view>
							<image v-if="item.count == 0" @click="item.count = 1" class="ml-auto" style="width: 40rpx;height: 40rpx;" src="/static/icon/public/add-fill.png" mode=""></image>
							<view v-else class="ml-auto" style="margin-right: -15rpx;">
								<up-number-box
									:min="0"
									:max="item.prize_num"
									v-model="item.count" 
									@change="valChange($event,item)"
									button-size="0"
									:color="publicStyles['--color']"
									bgColor="transparent"
									inputWidth="18"
									:iconStyle="{
										'color': publicStyles['--color'],
										'background': 'transparent',
										'font-size': '24rpx',
									}"
								>
								</up-number-box>
							</view>
						</view>
						<view class="" style="position: absolute;top: 30rpx;right: 30rpx;">
							<image v-if="item.count == 0" @click="item.count = item.prize_num" style="width: 40rpx;height: 40rpx;" src="/static/icon/public/check.png" mode=""></image>
							<image v-else @click="item.count = 0" style="width: 40rpx;height: 40rpx;" src="/static/icon/public/check-fill.png" mode=""></image>
						</view>
					</view>
				</view>
				<no-more :show="state.list.length == 0"></no-more>
				
				
				<up-gap height="300"></up-gap>
				
				<up-popup :show="popup.showRule" @close="popup.showRule = false" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="public-popup-2 px-50 py-20 fc" style="width: 670rpx;min-height: 760rpx;position: relative;">
						<view class="fs-36">
							许愿说明
						</view>
						<view class="mt-80" style="max-height: 400rpx;overflow: scroll;line-height: 1.8;">
							<view class="">
								<up-parse :content="state.rule"></up-parse>
							</view>
						</view>
						<view @click="popup.showRule = false;" class="public-btn-3 transition py-25 t-c mt-auto mb-60">
							<view class="text-color-b fs-32">
								确认
							</view>
						</view>
					</view>
				</up-popup>
				
				<up-popup :show="popup.showConflate" @close="popup.showConflate = false" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="public-popup-3 px-50 py-20 fc" style="width: 670rpx;min-height: 600rpx;position: relative;">
						<view class="fs-36">
							合成提示
						</view>
						<view class="mt-100 pt-30 op-70 t-c px-100" style="line-height: 1.6;">
							合成商品{{processWidth >= 100? '已满足合成多个赏品是否合成': '未满足合成条件'}}
						</view>
						<view class="fr-ac gap-40 w-100 mt-auto">
							<view @click="popup.showConflate = false;" class="public-btn-7 transition py-25 t-c mb-60 flex-1">
								<view class="op-90 fs-32">
									取消
								</view>
							</view>
							<view v-if="processWidth >= 100" @click="get_wish_order_add" class="public-btn-4 transition py-25 t-c mb-60 flex-2">
								<view class="text-color-b fs-32">
									合成
								</view>
							</view>
							<view v-if="processWidth < 100" @click="popup.showConflate = false;" class="public-btn-4 transition py-25 t-c mb-60 flex-2">
								<view class="text-color-b fs-32">
									确定
								</view>
							</view>
						</view>
					</view>
				</up-popup>
				
				
				<fixed-bottom>
					<template #default>
						<view class="px-40 w-100 h-100 fr-ac">
							<view @click="changeAll" class="fr-ac">
								<up-icon v-if="selectAllCard" name="yuanxingxuanzhongfill" customPrefix="custom-icon" size="18"
									:color="publicStyles['--color']"></up-icon>
								<up-icon v-else name="yuanxingweixuanzhong" customPrefix="custom-icon" size="18"
									:color="publicStyles['--gray-9']"></up-icon>
								<view class="ml-10 op-90">
									全选
								</view>
							</view>
							
							<view @click="popup.showConflate = true" class="ml-auto fr-ac">
								<view class="public-btn-6 ml-30 fr-ac-jc color" style="width: 134rpx;height: 60rpx;">
									合成
								</view>
							</view>
						</view>
					</template>
				</fixed-bottom>
				
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll, onReachBottom
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		get_parse,
		wish_list,
		get_warehouse,
		wish_order_add
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		get_parseApi(18)
		get_wish_list()
		get_warehouseApi()
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	onReachBottom(()=>{
		if(state.last_limit == state.limit){
			state.page++
			get_warehouseApi()
		}
	})
	const processWidth = computed(()=>{
		let res = 0
		res = (Number(selectAllCardPrice.value) / Number(swiper.list[swiper.current].money)) * 100
		if(res == 'NaN' || res == 'Infinity') return 0
		return res
	})
	const selectAllCardPrice = computed(()=>{
		let num = 0
		state.list.forEach(item => num += (Number(item.count)) * Number(item.goodslist_money))
		let result = (Number(num) + Number(swiper.total_integral))
		return result.toFixed(2)
	})
	const selectAllCard = computed(()=>{
		let result = state.list.every(item => item.count == item.prize_num)
		return result 
	})
	
	
	const page = reactive({
		scrollTop:0
	})
	
	const tabs = reactive({
		current:0,
		list:[
			{
				id:1,
				name:'赏品',
			},
			{
				id:2,
				name:'卡牌',
			}
		]
	})
	function tabChange(e){
		tabs.current = e.index
		console.log(tabs.current)
		type_tabs.show = false
		type_tabs.list = [
			{
				id: 0,
				name: '全部'
			}
		]
		type_tabs.current = 0
		initData()
		get_warehouseApi()
	}
	
	const state = reactive({
		list:[],
		page:1,
		limit:9,
		last_limit:9,
		
		keyword:'',
		
		rule:'',
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 9
	}
	
	
	const popup = reactive({
		showRule:false,
		showConflate:false,
	})
	
	function replaceBox(){
		uni.navigateTo({
			url:`/pages/yifan_shang/replace`
		})
	}
	
	
	const swiper = reactive({
		current:0,
		list:[
			{
				id:1,
				url:'/static/logo.png'
			},
			{
				id:2,
				url:'/static/logo.png'
			},
			{
				id:3,
				url:'/static/logo.png'
			}
		],
		total_integral: 0
	})
	function swiperChange(e){
		console.log(e,'eeeeeeeee')
		swiper.current = e.detail.current
	}
	function scrollChange(item,index){
		swiper.current = index
	}
	
	
	const type_tabs = reactive({
		current:0,
		show:false,
		list:[
			{
				name:'全部',
				value:'',
			},
		]
	})
	function typeChange(item,index){
		console.log(item)
		type_tabs.current = index
		type_tabs.show = false
		initData()
		get_warehouseApi()
	}
	function valChange(e,item){
		item.count = e.value
	}
	
	
	async function get_wish_list(){
		const res = await wish_list({
			type: tabs.list[tabs.current].id,
			product_id:''
		})
		swiper.list = res.product
		swiper.total_integral = res.total_integral
	}
	
	
	async function get_parseApi(type){
		const res = await get_parse({
			type
		})
		state.rule = res
	}
	
	async function get_warehouseApi(){
		const res = await get_warehouse({
			type: tabs.list[tabs.current].id,
			page: state.page,
			shang_id: type_tabs.list[type_tabs.current].id
		})
		let _arr = res.list.data.map(item => {
			item.count = 0
			item.select = false
			return item
		})
		state.last_limit = _arr.length
		state.list = state.list.concat(_arr)
		
		type_tabs.list = [
			{id: 0,name:'全部'}
		].concat(res.shang_list.map(e=>{
			return {
				id: e.shang_id,
				name: e.shang_title
			}
		}))
	}
	
	
	// 全选
	function changeAll(){
		if(selectAllCard.value) {
			state.list.forEach(item => {
				item.count = 0
				item.select = false
			})
		} else {
			state.list.forEach(item => {
				item.count = item.prize_num
				item.select = true
			})
		}
	}
	
	
	// 合成
	async function get_wish_order_add(){
		let wish_info = state.list.filter(item => item.count>0).map(item => {
			return {prize_code:item.prize_code,number:item.count}
		})
		
		const res = await wish_order_add({
			type: tabs.list[tabs.current].id,
			product_id:swiper.list[swiper.current].id ,
			wish_info:JSON.stringify(wish_info)
		})
		popup.showConflate = false
		initData()
		await get_wish_list()
		await get_warehouseApi()
		uni.$u.toast('合成成功！')
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 30rpx;
		
	}
	
	.swiper-item{
		width: fit-content;
		height: fit-content;
	}
	.swiper-item-active{
		image{
			width: 250rpx;height: 250rpx;
		}
	}
	.swiper-item-default{
		opacity: 0.7;
		image{
			width: 210rpx;height: 210rpx;
		}
	}
	
	::v-deep .u-number-box__minus,.u-number-box__plus{
		background-color: transparent !important;
	}
</style>